<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .font {
        color: red;
      }
      .font2 {
        color: green;
      } */
      .active {
        font-size: 30px;
      }
      .red-font {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <p v-bind:class="className">class绑定</p>
      <button v-on:click="className = className === 'font' ? 'font2' : 'font'">
        btn
      </button> -->

      <!-- class的对象语法 -->
      <!-- key表示的是类名，value表示变量或者表达式 -->
      <!-- 如果类名出现了连字符，需要加引号 -->
      <!-- class和:class是可以一起出现的 -->
      <!-- <p class="abc" :class="{active: done, 'red-font': num === 1}">
        class绑定
      </p> -->
      <p class="abc" :class="obj">class绑定</p>
    </div>

    <script src="./Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            // className: "font",
            done: true,
            num: 1,
            // obj: {
            //   active: true,
            //   "red-font": true,
            // },
          };
        },
        computed: {
          obj() {
            return {
              active: this.done,
              "red-font": this.num === 1,
            };
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
